<template>
  <div class="row">
    <!--展示用户列表-->
    <div
      v-show="usersInfo.users.length" 
      class="card"
      v-for="user in usersInfo.users"
      :key='user.login'
    >
      <a 
        :href="user.html_url" 
        target="_blank"    
      >
        <img :src="user.avatar_url" style="width: 100px"/>
      </a>
      <p class="card-text">{{user.login}}</p>
    </div>
    <!--展示欢迎词-->
    <h1 v-show="usersInfo.isFirst">欢迎使用！</h1>
    <!--展示加载中-->
    <h1 v-show="usersInfo.isLoading">加载中...</h1>
    <!--展示错误信息-->
    <h1 v-show="usersInfo.errMsg">请求出错了,错误信息:{{usersInfo.errMsg}}</h1>
  </div>
</template>

<script>
    export default {
    name: "List",
    data() {
        return {
          usersInfo:{
            isFirst:true,
            isLoading:false,
            errMsg:'',
            users:[]
          }
        }
    },
    mounted() {
        this.$bus.$on('userList',(data)=>{
            console.log('List组件收到数据',data);
            this.usersInfo = {...this.usersInfo,...data}
        })
    },
    };
</script>

<style>
    .album {
    min-height: 50rem; /* Can be removed; just added for demo purposes */
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: #f7f7f7;
    }

    .card {
    float: left;
    width: 33.333%;
    padding: 0.75rem;
    margin-bottom: 2rem;
    border: 1px solid #efefef;
    text-align: center;
    }

    .card > img {
    margin-bottom: 0.75rem;
    border-radius: 100px;
    }

    .card-text {
    font-size: 85%;
    }
</style>